import React from 'react';
import { Chart, Tooltip, Geom, Legend, Axis, Guide } from 'bizcharts';
import DataSet from '@antv/data-set';
import Slider from 'bizcharts-plugin-slider';
import autoHeight from '../autoHeight';
import styles from './index.less';

const { Line } = Guide;
@autoHeight()
class TimelineChartSeven extends React.Component {
  render() {
    const {
      tickInterval,
      yMin = 0,
      yMax = 0,
      title,
      height,
      padding = [document.body.clientWidth < 900 ? 120 : 60, 40, 40, 40],
      borderWidth = 2,
      data,
    } = this.props;

    const ds = new DataSet({
      state: {
        start: data[0].x,
        end: data[data.length - 1].x,
      },
    });
    const dv = ds.createView();
    dv.source(data).transform({
      type: 'filter',
      callback: obj => {
        const date = obj.x;
        return date <= ds.state.end && date >= ds.state.start;
      },
    });
    const cols = {
      value: {},
      x: {
        type: 'cat',
        tickCount: 10,
        range: [0, 1],
        mask: 'YYYY-MM-DD',
      },
    };
    return (
      <div className={styles.timelineChart} style={{ height: height + 30 }}>
        <div>
          <Chart
            filter={[
              [
                'type',
                t => {
                  if (
                    t === '涨跌幅' ||
                    t === 'SPY涨跌幅' ||
                    t === 'SPY净值' ||
                    t === '股票净值' ||
                    t === '组合净值' ||
                    t === '相对强度' ||
                    t === '20日相对强度' ||
                    t === '跑赢SPY比率(1月）'
                  )
                    return true;
                  return false;
                },
              ],
            ]}
            height={height}
            padding={padding}
            data={dv}
            scale={cols}
            renderer="svg"
            forceFit
          >
            <Axis name="x" />
            <Axis name="value" />
            <Legend position="top" />
            <Tooltip crosshairs={{ type: 'y' }} />
            <Geom type="line" position="x*value" size={2} color="type" />
            <Guide>
              <Line
                top // {boolean} 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
                start={['min', 0.6]} // {object} | {function} | {array} 辅助线结束位置，值为原始数据值，支持 callback
                end={['max', 0.6]} // 同 start
                lineStyle={{
                  stroke: 'rgb(15,238,0)', // 线的颜色
                  lineDash: [0], // 虚线的设置
                  lineWidth: 1, // 线的宽度
                }} // {object} 图形样式配置 https://bizcharts.net/products/bizCharts/api/graphic#线条样式
                // text={{
                //   position: 'start', // 'start' | 'center' | 'end' | '39%' | 0.5 文本的显示位置
                //   autoRotate: true, // {boolean} 是否沿线的角度排布，默认为 true
                //   style: {
                //     fill: 'red',
                //   }, // {object}文本图形样式配置,https://bizcharts.net/products/bizCharts/api/graphic#文本属性
                //   offsetX: 20, // {number} x 方向的偏移量
                //   offsetY: -10, // {number} y 方向的偏移量
                //   content: '预期收益趋势线', // {string} 文本的内容
                // }}
              />
              <Line
                top // {boolean} 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
                start={['min', 0.4]} // {object} | {function} | {array} 辅助线结束位置，值为原始数据值，支持 callback
                end={['max', 0.4]} // 同 start
                lineStyle={{
                  stroke: 'rgb(241,13,14)', // 线的颜色
                  lineDash: [0], // 虚线的设置
                  lineWidth: 1, // 线的宽度
                }}
              />
            </Guide>
          </Chart>
          <Slider
            padding={[0, padding[1] + 60, 100, padding[3] + 60]}
            width="auto"
            height={30}
            xAxis="x"
            yAxis="value"
            scales={{
              x: {
                type: 'cat',
                tickCount: 10,
                range: [0, 1],
                mask: 'YYYY-MM-DD',
              },
            }}
            data={data}
            start={ds.state.start}
            end={ds.state.end}
            backgroundChart={{ type: 'line' }}
            onChange={({ startValue, endValue }) => {
              ds.setState('start', startValue);
              ds.setState('end', endValue);
            }}
          />

          {/* <Geom type="line" position="x*value" size={2} color="type" /> */}
          <br />
        </div>
      </div>
    );
  }
}

export default TimelineChartSeven;
